<template>
  <div class="historyHotContainer">
    <!-- S历史记录区块 -->
    <div class="wrap" v-if="showHistory">
      <div class="top">
        <h4>历史记录</h4>
        <van-icon name="delete-o" @click="clear" />
      </div>
      <div class="down">
        <van-tag
          @click="tagClick(item)"
          v-for="(item, index) in historyKeywordList"
          plain
          type="default"
          :key="index"
          >{{ item }}</van-tag
        >
      </div>
    </div>
    <!-- E历史记录区块 -->
    <!-- S热门搜索 -->
    <div class="wrap">
      <div class="top">
        <h4>热门搜索</h4>
      </div>
      <div class="down">
        <van-tag
          @click="tagClick(item.keyword)"
          v-for="(item, index) in hotKeywordList"
          plain
          :type="item.is_hot === 1 ? 'danger' : 'default'"
          :key="index"
          >{{ item.keyword }}</van-tag
        >
      </div>
    </div>
    <!--E热门搜索 -->
  </div>
</template>
<script>
import {ClearHistory} from '@/request/api'
export default {
  props:['historyKeywordList','hotKeywordList'],
  data(){
    return{
      showHistory:true
    }
  },
  methods:{
    tagClick(tagVal){
      this.$emit("tagClick",tagVal)
    },
    clear(){
      ClearHistory().then(res=>{
        if(res.errno==0){
          this.$toast.success("删除成功")
          setTimeout(()=>{
            this.showHistory = false
          },1000)
        }
      })
    }
  } 
}
</script>
<style lang="less" scoped>
.wrap {
  background-color: #fff;
  padding: 0 2%;
  margin-bottom: 0.1rem;
  .top {
    display: flex;
    justify-content: space-between;
    height: 0.4rem;
    align-items: center;
    h4 {
      font-weight: normal;
      font-size: 0.18rem;
    }
    .van-icon {
      font-size: 0.16rem;
    }
  }
  .down {
    .van-tag {
      padding: 0.01rem 0.03rem;
      margin: 0 0.1rem 0.1rem 0;
    }
  }
}
</style>
